<template>
  <div>
    <BreakSpace label="基本信息" :containerStyle="{ marginBottom: '15px' }" />
    <FormPanel ref="formPanel" :list="formList" labelWidth="100" :formType="type" :isSubmitBtn="false" @formChange="formChangeHandle2" />
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="价格信息" name="first">
        <FormPanel ref="formPanel" :list="formList2" labelWidth="120" :formType="type" :isSubmitBtn="false" @formChange="formChangeHandle" />
      </el-tab-pane>
      <el-tab-pane label="供应商信息" name="second">
        <!-- table -->
        <FilterTable
          ref="table"
          :columns="columns"
          :fetchapi="fetchApi"
          :params="fetchParams"
          height="auto"
          :datakey="'records'"
          :isSelectColumn="false"
          :onRowSelectChange="selectChange"
          columnsRef="jzySeries"
          :onColumnsChange="columns => (this.columns = columns)"
        >
        </FilterTable>
      </el-tab-pane>
    </el-tabs>
    <div
      :style="{
        textAlign: 'center'
      }"
    >
      <el-button @click="saveDialog" type="primary" :loading="saveLoading" v-if="type === 'edit'">保 存</el-button>
      <el-button @click="closeDialog">返 回</el-button>
    </div>
  </div>
</template>

<script>
import { updatePartPrice, getPartSupplier } from '@/api/partsmanage/partinfos/partInfoManage/index';
import { dictionary } from '@/utils/dictMixin';

export default {
  name: 'partInfoDealer',
  mixins: [dictionary],
  props: {
    type: {
      type: String,
      default: 'add'
    },
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    this.saveData = null;
    return {
      formList: this.createFormList(),
      formList2: this.createFormList2(),
      columns: this.createTableColumns(),
      activeName: 'first',
      saveLoading: false,
      fetchApi: getPartSupplier,
      fetchParams: {
        id: ''
      }
    };
  },
  created() {
    this.fetchParams.id = this.rowData.id;
    console.info(this.fetchParams);
    console.info(this.rowData.id);
    this.init();
  },
  methods: {
    selectChange(val) {
      console.log('val', val);
      this.rowSelectData = val;
    },
    init() {
      console.info(this.type);
      console.info(this.rowData);
      if (this.type == 'edit') {
        this.formList2.find(item => item.fieldName == 'ls').disabled = false;
        this.formList2.find(item => item.fieldName == 'bx').disabled = false;
      }
      this.formList.forEach(x => {
        if (x.fieldName == 'bjdgbz') {
          console.info(x.initialValue);
          if (this.rowData[x.fieldName] == 'Y') {
            x.initialValue = '是';
          } else {
            x.initialValue = '否';
          }
        } else {
          x.initialValue = this.rowData[x.fieldName];
        }
      });
      this.formList2.forEach(x => {
        x.initialValue = this.rowData[x.fieldName];
      });
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '供应商代码',
          dataIndex: 'bjgybm',
          sorter: true
        },
        {
          title: '供应商名称',
          dataIndex: 'bjgyjc',
          sorter: true
        }
      ];
    },
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '配件代码',
          fieldName: 'bjxmbh',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '配件名称',
          fieldName: 'bjzwmc',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '配件类别',
          fieldName: 'bjpjlx',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '单位',
          fieldName: 'bjdanw',
          disabled: true
        },
        {
          type: 'SELECT',
          label: '配件属性',
          fieldName: 'bjpjsx',
          disabled: true,
          itemList: this.createDictList('5000'),
          initialValue: 50001001
        },
        {
          type: 'INPUT',
          label: '最小包装数',
          fieldName: 'bjxszx',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '首用车型',
          fieldName: 'bjsycx',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '销售索标识',
          fieldName: 'bjdgbz',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '备注',
          fieldName: 'xtcser',
          selfCols: 3,
          maxlength: 3000,
          disabled: true
        },
        {
          type: 'INPUT',
          label: '长度',
          fieldName: 'bjjccc',
          initialValue: '',
          hidden: false,
          unitRender: () => {
            return <span>mm</span>;
          },
          disabled: true
        },
        {
          type: 'INPUT',
          label: '宽度',
          fieldName: 'bjjcck',
          initialValue: '',
          hidden: false,
          unitRender: () => {
            return <span>mm</span>;
          },
          disabled: true
        },
        {
          type: 'INPUT',
          label: '高度',
          fieldName: 'bjjccg',
          initialValue: '',
          hidden: false,
          unitRender: () => {
            return <span>mm</span>;
          },
          disabled: true
        },
        {
          type: 'INPUT',
          label: '体积',
          fieldName: 'bjtiji',
          initialValue: '',
          hidden: false,
          unitRender: () => {
            return <span>mm3</span>;
          },
          disabled: true
        },
        {
          type: 'INPUT',
          label: '净重',
          fieldName: 'BJJINZ',
          initialValue: '',
          hidden: false,
          unitRender: () => {
            return <span>g</span>;
          },
          disabled: true
        }
      ];
    },
    createFormList2() {
      return [
        {
          type: 'INPUT',
          label: '常规订货价格',
          fieldName: 'xs',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '终端建议零售VIP价格',
          fieldName: 'ls',
          disabled: true,
          rules: [
            { required: true, message: '请输入终端建议零售VIP价格', trigger: 'blur' },
            { required: true, pattern: /^\d+(\.)?(\d)?(\d)?$/, message: '请输入数字保留小数点后两位', trigger: 'blur' }
          ]
        },
        {
          type: 'INPUT',
          label: '终端建议零售价格格',
          fieldName: 'bx',
          disabled: true,
          rules: [
            { required: true, message: '请输入终端建议零售价格格', trigger: 'blur' },
            { required: true, pattern: /^\d+(\.)?(\d)?(\d)?$/, message: '请输入数字保留小数点后两位', trigger: 'blur' }
          ]
        }
      ];
    },
    formChangeHandle(val) {
      this.saveData = val;
    },
    formChangeHandle2(val) {},
    async saveDialog() {
      const err = this.$refs.formPanel.SUBMIT_FORM();
      if (err === null) {
        return false;
      }
      this.saveLoading = true;
      console.info(this.saveData);
      console.info('11111111111111111111');
      let saveinfos = [];
      saveinfos.push({
        id: this.rowData.id,
        bx: this.saveData.bx,
        ls: this.saveData.ls
      });
      console.info(saveinfos);
      const res = await updatePartPrice({ id: this.rowData.id, bx: this.saveData.bx, ls: this.saveData.ls });
      console.info(res);
      console.info('11111');
      if (res.resultCode === 200) {
        this.closeDialog('refresh');
      }
      this.saveLoading = false;
    },
    closeDialog(param) {
      this.$emit('close', { visible: false, type: param });
    }
  }
};
</script>

<style scoped></style>
